import {toJS} from 'mobx';
import {Row} from 'antd'
import React, {Fragment} from "react";
import View from "../base/View";
import defaultData from "./data";
import {WeaInput, WeaSelect} from "ecCom";
import AddressStore from "./Store";
import {observer} from 'mobx-react';
import {CHECKED} from "../../../../../constants/common";
import './View.less';

@observer
class AddressView extends View {
  constructor(props) {
    super(props);

    this.store = props.store;
  }

  componentDidMount() {
    const { data, onChange } = this.props;

    this.store.init(data);

    if(onChange){
      setTimeout(function (){
        if(data.district && data.district.required == '1'){
          onChange(data.district.uuid, ' ');
        } else if(data.city && data.city.required == '1') {
          onChange(data.city.uuid, ' ');
        } else if(data.province && data.province.required == '1') {
          onChange(data.province.uuid, ' ');
        }
      }, 500);
    }
  }

  onValueChange(type) {
    return value => {
      const { data, onChange } = this.props;

      // 移动端
      if(value.target) {
        value = value.target.value;
      }

      this.store.onValueChange(type, value);
      onChange(data[type].uuid, value);

      switch(type) {
        case "province":
          onChange(data.city.uuid, '');
        case "city":
          onChange(data.district.uuid, '');
      }
    };
  }

  renderForPC(data) {
    const { province, city, district, detail } = data;
    const {
      province: provinceVal, city: cityVal, district: districtVal, detail: detailVal,
      provinceOpts, cityOpts, districtOpts
    } = this.store;

    return (
      <Fragment>
        <Row className='wea-edc-table-layout'>
          {CHECKED === province.required &&
            <div data-id={province.uuid}>
              <WeaSelect
                className='wea-edc-form-field'
                value={provinceVal}
                options={toJS(provinceOpts)}
                onChange={this.onValueChange('province')}
              />
            </div>
          }
          {CHECKED === city.required &&
            <div data-id={city.uuid}>
              <WeaSelect
                value={cityVal}
                options={toJS(cityOpts)}
                onChange={this.onValueChange('city')}
              />
            </div>
          }
          {CHECKED === district.required &&
            <div data-id={district.uuid}>
              <WeaSelect
                value={districtVal}
                options={toJS(districtOpts)}
                onChange={this.onValueChange('district')}
              />
            </div>
          }
        </Row>
        {CHECKED === detail.required &&
          <Row className='wea-edc-table-layout' style={{ paddingTop: 5 }}>
            <div data-id={detail.uuid} >
              <WeaInput
                value={detailVal}
                onChange={this.onValueChange('detail')}
              />
            </div>
          </Row>
        }
      </Fragment>
    );
  }

  renderOpts(options) {
    return (
      <Fragment>
        {options.map(opt => (
          <option key={opt.key} selected={opt.selected} value={opt.key} >
            {opt.showname}
          </option>
        ))}
      </Fragment>
    );
  }

  renderForMobile(data) {
    const { province, city, district, detail } = data;
    const {
      detail: detailVal,
      provinceOpts, cityOpts, districtOpts
    } = this.store;

    return (
      <Fragment>
        <Row className='wea-edc-table-layout'>
          {CHECKED === province.required &&
            <div className='wea-edc-select-container' data-id={province.uuid}>
              <select onChange={this.onValueChange('province')}>
                {this.renderOpts(provinceOpts)}
              </select>
            </div>
          }
          {CHECKED === city.required &&
            <div className='wea-edc-select-container' data-id={city.uuid}>
              <select onChange={this.onValueChange('city')}>
                {this.renderOpts(cityOpts)}
              </select>
            </div>
          }
        </Row>
        {CHECKED === district.required &&
          <Row className='wea-edc-table-layout' style={{ paddingTop: 5 }}>
            <div className='wea-edc-select-container' data-id={district.uuid} >
              <select onChange={this.onValueChange('district')}>
                {this.renderOpts(districtOpts)}
              </select>
            </div>

          </Row>
        }
        {CHECKED === detail.required &&
          <Row className='wea-edc-table-layout' style={{ paddingTop: 5 }}>
            <div data-id={detail.uuid}>
              <WeaInput
                className='wea-edc-form-field'
                value={detailVal}
                onChange={this.onValueChange('detail')}
              />
            </div>
          </Row>
        }
      </Fragment>
    )
  }
}

AddressView.defaultProps = {
  data: defaultData,
  value: ''
};

export default props => <AddressView store={new AddressStore()} {...props} />